<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐藏滚动条或更改滚动条样式</title>
  <style>
    .scroll-container {
      width: 500px;
      height: 150px;
      border: 1px solid #ddd;
      padding: 15px;
      overflow: /*auto*/scroll;
    }

    .scroll-container .row {
      margin: 0;
      line-height: 1.5;
    }

    .scroll-container::-webkit-scrollbar {
      width: 8px; /*占据的是width的宽度,比如你容器width为100,这里scrollbar宽度设置为8px,那么容器宽度就变为了92,但scrollbar的外边缘不是放在width上的,而是放在padding和border交界处的; 纵向滚动条也同理*/
      background: white;
    }

    .scroll-container::-webkit-scrollbar-corner, /* 滚动条角落 */
    .scroll-container::-webkit-scrollbar-thumb,
    .scroll-container::-webkit-scrollbar-track {
      border-radius: 4px;
    }

    .scroll-container::-webkit-scrollbar-corner,
    .scroll-container::-webkit-scrollbar-track {
      /* 滚动条轨道 */
      background-color: rgba(180, 160, 120, 0.1);
      box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
    }

    .scroll-container::-webkit-scrollbar-thumb {
      /* 滚动条手柄 */
      background-color: #00adb5;
    }
  </style>
</head>

<body>
<p class="scroll-container">
  庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。
</p>
</body>

</html>
